<template>
  <div>
    <!--  影院和地址-->
    <div class="top">
      影院
      <span @click="gocity()"
        >{{ city }}<i class="iconfont icon-xiajiantou"></i
      ></span>
    </div>
    <!-- 选择的下拉菜单 -->
    <van-dropdown-menu class="lang">
      <van-dropdown-item v-model="value1" :options="option1" :v-if="cang">
        <div>
          <van-area :area-list="areaList" @confirm="queren" :v-if="cang" />
        </div>
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <router-view></router-view>

    <!-- 影院的信息 -->
    <div class="view">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="——没有更多影院了——"
        @load="onLoad"
      >
        <van-card
          v-for="item in list"
          :key="item.cinemaId"
          @click="goCinemaDetail(item.cinemaId)"
        >
          <template #title>
            <p class="title">{{ item.name }}</p>
          </template>
          <template #desc>
            <p class="address">{{ item.address }}</p>
          </template>
          <!-- 价格和距离 -->
          <template #price class="money">
            <span>￥{{ item.lowPrice | fixed(item.lowPrice) }}起</span>
            <div style="float: right">
              {{ item.longitude | juli(item.latitude) }}公里
            </div>
          </template>
          <br />
        </van-card>
      </van-list>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import { areaList } from '@vant/area-data'
// 引入下拉菜单
import Vue from 'vue'
import { DropdownMenu, DropdownItem, Card, List, Area } from 'vant'

Vue.use(Area)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Card)
Vue.use(List)
export default {
  data() {
    return {
      // 各个影院的数据
      list: [],
      // cinemaList: [],
      // 城市，省的id
      cinema: [],
      // 分页，为了做懒加载
      pageNum: 1,
      loading: false,
      finished: false,
      city: '北京',
      cang: true,
      // 组件的数据
      value1: 0,
      value2: 'a',
      value3: 'A',
      areaList,
      brr: [],
      arr: [],
      area: '请选择地区',
      option1: [{ text: '全城', value: 0 }],
      option2: [
        { text: 'APP订票', value: 'a' },
        { text: '前台兑换', value: 'b' }
      ],
      option3: [
        { text: '最近去过', value: 'A' },
        { text: '离我最近', value: 'B' }
      ]
    }
  },
  filters: {
    fixed(a) {
      const b = a / 100
      const c = b.toFixed(1)
      return c
    },
    juli(m, n) {
      var EARTH_RADIUS = 6378137.0
      var radLat1 = (m * Math.PI) / 180.0
      var radLat2 = (116.388298 * Math.PI) / 180.0
      var a = radLat1 - radLat2
      var b = (n * Math.PI) / 180.0 - (39.928902 * Math.PI) / 180.0
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(a / 2), 2) +
              Math.cos(radLat1) *
                Math.cos(radLat2) *
                Math.pow(Math.sin(b / 2), 2)
          )
        )
      s = s * EARTH_RADIUS // EARTH_RADIUS;
      s = Math.round(s * 10000) / 10000000
      s = s.toFixed(2)
      return s
    }
  },
  methods: {
    goCinemaDetail(id) {
      // const filmId = this.$store.commit('getCityId', id)
      // 影院id
      console.log(id)
      this.$router.push({
        path: '/cinema/detail',
        query: {
          id
        }
      })
    },
    queren(Event) {
      console.log(Event)
      // this.cang = false
      // 市名
      this.area = Event[2].name
      // 省的id
      const cityId = Event[1].code - 0
      const quName = Event[2].name
      // 省名
      this.city = Event[1].name
      this.option1.text = Event[1].name
      this.option1.value = 0
      // console.log(this.option1.text)
      // console.log(Event[1].name)
      this.$http
        .get(api.getCList + '?cityId=' + cityId + '&pageSize=1000')
        .then((res) => {
          this.crr = res.data.cinemas
          this.brr = this.crr.filter((item) => {
            return item.districtName === quName
          })
          this.list = this.brr
          this.finished = true
        })
    },
    // 影院列表懒加载
    onLoad() {
      // 获取数据的时候，直接this.$http就能得到数据
      this.$http.get(api.getCList + '?pageNum=' + this.pageNum).then((res) => {
        // 请求数据--能用get不用post
        // console.log(res)
        // 如果请求状态的正确的
        if (res.status === 0 && res.msg === 'ok') {
          // 如果list的长度小于数据中的总数
          if (this.list.length < res.data.total) {
            // pageNum的数据往上加，并把请求回来的数据赋值给data中的数据
            this.pageNum++
            this.list.push(...res.data.cinemas)
          } else {
            // 当list的长度和数据总数一样的时候，完成的状态打开
            this.finished = true
          }
          // 判断完成以后，加载的状态关闭
          this.loading = false
          // 城市id
          if (res.cityId === this.$store.state.CityId) {
            // const a = res.map((item) => item.data.cinemas.districtName)
            console.log(this.$store.state.CityId)
          }
        }
      })
    },
    gocity() {
      // 跳转到city
      this.$router.push('/city')
    }
  },
  created() {
    console.log(this.list)
    if (this.$store.state.CityName) {
      // console.log(this.$store.state.CityName)
      this.city = this.$store.state.CityName
    }
  }
}
</script>

<style scoped lang='scss'>
.top {
  width: 100%;
  height: 44px;
  font-size: 17px;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 44px;
  z-index: 2;
  background-color: #fff;
  color: #191a1b;
  span {
    font-size: 12px;
    position: absolute;
    left: 20px;
    top: 0;
    i {
      font-size: 10px;
    }
  }
}
.lang {
  position: fixed;
  top: 44px;
  left: 0;
  z-index: 1;
  width: 100%;
  background-color: #fff;
}
.view {
  padding-top: 90px;
  padding-bottom: 44px;
  .van-card {
    background-color: #fff;
    .van-card__header {
      position: relative;
      .title {
        color: #191a1b;
        font-size: 15px;
        float: left;
        width: 70%;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
      }
      .address {
        float: left;
        color: #797d82;
        font-size: 12px;
        margin-top: 5px;
        max-width: 80%;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
      }
      .van-card__price {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 60px;
        span {
          font-size: 15px;
          color: #ff5f16;
        }
      }
    }
  }
}
</style>
